#{extends 'User.html' /}

<script type="text/javascript">

    $(document).ready(function(){
        $('#photos').galleryView({
            panel_width: 716,
            panel_height: 357,
            frame_width: 10,
            frame_height: 10,
            transition_speed: 1500,
            frame_gap: 0,
            easing: 'easeInOutQuad',
            transition_interval: 12000
        });

        //$("a[rel^='prettyPhoto']").prettyPhoto();

        //$('img').css('top','0');
        //$('.test').css('top','0');
    });
</script>



<div id="topheaders" style="z-index: 800;">

    <ul>
        <li class="tophead">Spotlight</li>
        <li class="topimage">
            <a title="TankJet® Fluid-Driven Tank Cleaner" rel="prettyPhoto" href="http://www.youtube.com/watch?v=X2GY9cBxAeg?iframe=true&amp;width=750&amp;height=510&amp;rel=0"><img alt="TankJet® 75" src="@{'/public/images/featured/rc_tankjet75_239x124.jpg'}"></a>
        </li>
        <li class="tophead">Featured Video</li><li class="topimage">
        <a title="Pulse Width Modulated (PWM) Flow Control Video" rel="prettyPhoto" href="http://www.youtube.com/watch?v=O49mqn33vBI?iframe=true&amp;width=670&amp;height=500&amp;rel=0"><img width="239" height="153" alt="Pulse Width Modulated (PWM) Flow Control" src="@{'/public/images/featured/rc_pulsajet_video.jpg'}"></a>
    </li>
    </ul>
</div>

<div id="mainContent" style="z-index: 790;">
    <div id="gallery" class="gallery" >

        <ul id="photos">
            <li class="panel" >
                <img class="test" src="@{'/public/images/slidebar/spraying.jpg'}" />
                <div class="panel-overlay">
                    <h4><span>Unique, Constant Speed TankJet® 26984 Nozzles for Effective Cleaning
			    of Tanks up to 20' (6 m) in Dia.</span></h4>
                </div>
            </li>
            <li>
                <img id="aaaa" class="test" src="@{'/public/images/slidebar/injectors.jpg'}" />
                <div class="panel-overlay">
                    <h4><span>Durable, Dependable Spray Injectors Built-to-Order</span></h4>
                </div
            </li>
            <li>
                <img class="test" src="@{'/public/images/slidebar/vmau.jpg'}" />
                <div class="panel-overlay">
                    <h4><span>VMAU Automatic Spray Nozzles Provide Easy Fine-Tuning of Spray </span></h4>
                </div
            </li>
            <li>
                <img class="test" src="@{'/public/images/slidebar/pulsajet.jpg'}" />
                <div class="panel-overlay">
                    <h4><span>PulsaJet® Automatic Spray Nozzle Headers Are Ideal for Precision Coating,
			    Dispensing, Marking and More</span></h4>
                </div
            </li>
            <li>
                <img class="test" src="@{'/public/images/slidebar/header.jpg'}" />
                <div class="panel-overlay">
                    <h4><span>Solid Stream Shower Header Widely Used in Paper Mills</span></h4>
                </div
            </li>
        </ul>
    </div>


</div>

<br class="clearfloat">

<div id="nozzles" style="z-index: 660; ">
    <h2>&{'user.home.box1.title'}</h2>
    <p>&{'user.home.box1.intro'} <br>
        #{a @User.topic('spray_nozzles_overview') }
            <img src="@{'/public/images/common/arrow_btn.jpg'}" width="23" height="24" alt="&{'user.home.box1.title'}">
        #{/a}
        <br>
    </p>
</div>

<div id="control" style="z-index: 650; ">
    <h2>&{'user.home.box2.title'}</h2>
    <p>&{'user.home.box2.intro'}<br>
        #{a @User.topic('spray_control_overview') }
            <img src="@{'/public/images/common/arrow_btn.jpg'}" width="23" height="24" alt="&{'user.home.box2.title'}">
        #{/a}
    </p>
</div>

<div id="analysis" style="z-index: 640; ">
    <h2>&{'user.home.box3.title'}</h2>
    <p>&{'user.home.box3.intro'}<br>
        #{a @User.topic('spray_analysis_overview') }
            <img src="@{'/public/images/common/arrow_btn.jpg'}" width="23" height="24" alt="&{'user.home.box3.title'}">
        #{/a}
    </p>
</div>

<div id="fabrication" style="z-index: 630; ">
    <h2>&{'user.home.box4.title'}</h2>
    <p>&{'user.home.box4.intro'}
        <br/>
        #{a @User.topic('spray_fabrication_overview') }
            <img src="@{'/public/images/common/arrow_btn.jpg'}" width="23" height="24" alt="&{'user.home.box4.title'}">
        #{/a}
</div>

<br class="clearfloat">

<div id="home-news">
    <h2>&{'user.news.title'}</h2>
    <div class="home_list_news ">
        *{#{list items:allNews,as:'news' }}*
            *{<div class="news_title">${news.title}</div>}*
            *{<div class="news_summary"> <p >${news.brief}</p> </div>}*
        *{#{/list}}*
        #{list items:allNews, as:'tintuc' }
                    <div class="news_title">
                        #{a @User.detailsNews(tintuc.id)}${tintuc.title}#{/a}
                    </div>
                    <div class="news_summary">
                        <p>${tintuc.brief}</p>
                    </div >
                    <br class="clearfloat">
        #{/list}
    </div>
</div>